.item {
  display: flex;
  justify-content: space-between;
  flex-wrap: wrap;
  margin: 30rpx;

  .activity-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 200rpx;
    height: 200rpx;
    margin-bottom: 30rpx;
    background-color: #f0f0f0;
    border-radius: 40rpx;

    .item-name {
      margin: 10rpx;
      font-size: 20rpx;
    }

    .item-image {
      width: 80rpx;
      padding: 10rpx;
    }
  }

  .dialog {
    color: rgba($color: #000000, $alpha: 0.5);
    .dialog-content {
      z-index: 5001;
      position: fixed;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%);
      width: 600rpx;
      padding: 20px 0 0;
      background-color: #fff;
      border-radius: 30rpx;
      text-align: center;
      opacity: 1;
      .title {
        color: #000;
        margin-bottom: 80rpx;
      }
      .weight,
      .group,
      .per {
        position: relative;
        display: flex;
        justify-content: center;
        margin-top: 50rpx;
        .font {
          width: 150rpx;
        }
        .text {
          width: 50px;
          margin-left: 30rpx;
        }
         .blur {
          position: absolute;
          bottom: -20rpx;
          left: 320rpx;
          width: 0px;
          height: 1px;
          padding-left: 0;
          background-color: rgba($color: #B92439, $alpha: 0.5);
        }
         .focus {
          width: 200rpx;
          left: 220rpx;
          transition: 0.4s;
        }
        .picker {
          width: 150rpx;
          background: linear-gradient(to bottom, transparent, rgba($color: #B92439, $alpha: 0.1), transparent);
        }
        .picker-mask {
          display: none;
        }

        .unit {
          width: 150rpx;
        }
      }
      .tips {
        width: 100rpx;
        margin-top: 30rpx;
        margin-left: 250rpx;
        font-size: 20rpx;
        color: rgba($color: #B92439, $alpha: 0.5);
      }
      .button {
        display: flex;
        justify-content: space-around;
        width: 100%;
        margin-top: 70rpx;
        margin-bottom: 20rpx;
        padding-top: 20rpx;
        border-top: 1px solid #f0f0f0;
        .cancel{
          flex:1;
          color: black;
          border-right: 1px solid #f0f0f0;
        }
        .confirm{
          flex:1;
          color: rgb(149, 168, 221);
        }
        
      }
    }
  }
  .circle {
    z-index: 4000;
    position: fixed;
    top: 40%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 35rpx;
    height: 35rpx;
    animation: moveX 2s linear forwards;
    .inner {
      width: 100%;
      height: 100%;
      background-color: salmon;
      border-radius: 50%;
      animation: moveY 2s cubic-bezier(0.5, -1, 1, 1) forwards;
    }
  }
  @keyframes shrinkFromEdges {
    0% {
      position: fixed;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%) scale(1);
      border-radius: 30rpx;
      opacity: 1;
    }
    100% {
      position: fixed;
      top: 40%;
      left: 50%;
      transform: translate(-50%, -50%) scale(0.1);
      border-radius: 50%;
      opacity: 0.1;
    }
  }
  @keyframes moveX {
    to {
      transform: translateX(270rpx);
    }
  }
  @keyframes moveY {
    to {
      transform: translateY(700rpx);
    }
  }
  
  .dialog-shrink {
    animation: shrinkFromEdges 0.4s forwards;
  }
}